<template>
    <div class="greeting">
        <h1>{{ title }}</h1>
        <p>{{ message }}</p>
        <button @click="changeMessage">点击我</button>
    </div>
</template>

<script>
export default {
    name: 'GreetingComponent',
    data() {
        return {
            title: '欢迎使用Vue SFC',
            message: '这是一个单文件组件的示例！'
        };
    },
    methods: {
        changeMessage() {
            this.message = '你点击了按钮！';
        }
    }
};
</script>

<style scoped>
.greeting {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

h1 {
    color: #42b983;
}

button {
    padding: 10px 20px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #369f6e;
}
</style>